<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-image: url("./img/background.jpg");
            background-size: 1700px 800px;
        }
        caption{
           text-align: center;
            font-size: 20px;
            color: #1b6d85;
        }
        #form{
            position: absolute;
            top: 50px;
            left: 500px;
            font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif;
        }
        table{
            width: 500px;
            height: 660px;
        }
        #submitButton{
            width: 150px;
            height: 40px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .inputer{
            width:200px ;
            height: 25px;
            border: 1px solid beige;
            background-color: rgba(255,255,255,0);
        }
    </style>
</head>
<body>
<div id="form">
<form>
  <table>
    <caption><strong>注册</strong></caption>
      <tr>
          <td>用户类型:</td>
          <td>
              <div >
                  <input type="radio" name="identity" checked="checked" >学生
                  <input type="radio" name="identity" >老师
              </div>
          </td>
      </tr>
      <tr>
          <td>头&nbsp &nbsp &nbsp  像:</td>
          <td>
              <div style="float:left;"><input  type="file" name="headImage"></div>
          </td>
      </tr>
      <tr>
          <td>
             用 户 名：
          </td>
          <td>
              <input type="text" name="username" class="inputer" placeholder="请输入您的用户名！">
          </td>
      </tr>
      <tr>
          <td>
              密  &nbsp &nbsp &nbsp 码：
          </td>
          <td>
              <input type="password" name="password" class="inputer" placeholder="请输入您的用户密码！">
          </td>
      </tr>
      <tr>
          <td>真实姓名:</td>
          <td>
              <input type="text" name="turename" class="inputer" placeholder="请输入您的真实姓名！">
          </td>
      </tr>
      <tr>
          <td>性  &nbsp &nbsp &nbsp 别：</td>
          <td>
              <div>
                  <input type="radio" name="sex" checked="checked">男
                  <input type="radio" name="sex" >女
              </div>
          </td>
      </tr>
      <tr>
          <td>年 &nbsp &nbsp &nbsp  龄：</td>
          <td>
              <input type="text" name="age" class="inputer" placeholder="请输入您的年龄！">
          </td>
      </tr>
      <tr>
          <td>电话号码：</td>
          <td>
              <input type="text" name="phone" class="inputer" placeholder="请输入您的手机号！">
          </td>
      </tr>
      <tr>
          <td>电子邮箱：</td>
          <td>
              <input type="text" name="email" class="inputer" class="inputer" placeholder="请输入您的e-mail！">
          </td>
      </tr>
      <tr>
          <td>身份证号</td>
          <td>
              <input type="text" name="personId" class="inputer" maxlength="18" placeholder="请输入您的身份证号！">
          </td>
      </tr>
      <tr>
          <td>年 &nbsp &nbsp &nbsp  级：</td>
          <td>
              <input type="text" name="grade" class="inputer" placeholder="请输入您的年级！">
          </td>
      </tr>
      <tr>
          <td>
              <input type="submit" id="submitButton" value="注册" >
          </td>
          <td>
              <a href="#">已有账号，直接登录</a>
          </td>
      </tr>

  </table>
</form>
</div>
</body>
</html>